import { Table, Pagination, Tooltip } from 'antd'
import { TableRowSelection } from 'antd/es/table/interface'
import { useEffect, useState } from 'react'
interface Props {
  rowKey?(record: any): any
  extra?: string | React.ReactNode
  dataSource?: any
  columns?: any
  scroll?: Record<string, number | string>
  loading?: boolean
  isSelection?: boolean
  selectRows?: (...set: any) => void
  onRow?: (...set: any) => Record<string, any>
  selectedRowKeys?: React.Key[]
  selectRowsType?: 'checkbox' | 'radio'
  bordered?: boolean
  pagination?: {
    pageSize: number | undefined
    total: number | undefined
    current: number
    onChange: (page: number, pageSize: number) => void
  } | null
  expandable?: any
  className?: string
  tableRowGray?: (record?: any) => string
  getCheckboxProps?: (...set: any) => any
  pageSizeOptions?: number[]
  isScrollY?: boolean
  scrollY?: number
  isCalcTextWidth?: boolean
  extraHeight?: number
  filterDomClassName?: string
  preserveSelectedRowKeys?: boolean
}
export default function CustomTable(props: Props) {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const [height, setHeight] = useState(0)
  const [innerHeight, setinnerHeight] = useState(window.innerHeight)
  const onSelectChange = (selectedRowKeys: React.Key[], info: any) => {
    setSelectedRowKeys(selectedRowKeys)
    if (props.isSelection && typeof props.selectRows === 'function') {
      props.selectRows(selectedRowKeys, info)
    }
  }
  useEffect(() => {
    if (props.isSelection && Array.isArray(props.selectedRowKeys)) {
      setSelectedRowKeys(props.selectedRowKeys)
    }
  }, [props.selectedRowKeys])
  const rowSelection = props.isSelection
    ? {
        selectedRowKeys,
        preserveSelectedRowKeys: props.preserveSelectedRowKeys !== false,
        onChange: onSelectChange,
        fixed: 'left',
        type: props.selectRowsType ? props.selectRowsType : 'checkbox',
        getCheckboxProps: props?.getCheckboxProps ? props?.getCheckboxProps : undefined,
      }
    : undefined

  const { dataSource, loading, columns, scroll, pagination, onRow } = props
  useEffect(() => {
    const reCalcHeight = () => {
      setinnerHeight(window.innerHeight)
    }
    window.addEventListener('resize', reCalcHeight)
    // tabs中 多个search_form_wrap 无法确定是哪一个 可以传递filterDom
    const filterDom = props?.filterDomClassName
      ? document.querySelector('.' + props?.filterDomClassName)
      : document.querySelector('.search_form_wrap')
    const resizeObserver = new ResizeObserver((entries) => {
      entries[0].target.clientHeight ? setHeight(entries[0].target.clientHeight) : setHeight(0)
    })
    if (filterDom) {
      resizeObserver.observe(filterDom)
    } else {
      setHeight(0)
    }
    return () => {
      resizeObserver.disconnect()
      window.removeEventListener('resize', reCalcHeight)
    }
  }, [])

  const getTableHeight = (innerHeight: number) => {
    return innerHeight - 200 - height - (props?.extraHeight || 0)
  }
  return (
    <div className={`custom_table_style${props?.className ? ' ' + props.className : ''}`}>
      <div className="table_extra_wrap">{props?.extra}</div>
      <Table
        className="table_wrap_box"
        dataSource={dataSource}
        columns={columns}
        scroll={{
          x: scroll?.x ?? window.innerWidth - 230 - 70,
          y: props?.isScrollY ? `${getTableHeight(innerHeight)}px` : props?.scrollY ? props?.scrollY : '100%',
        }}
        pagination={false}
        loading={loading}
        rowSelection={rowSelection as TableRowSelection<any>}
        rowKey={props.rowKey === undefined ? (record) => record.id : props.rowKey}
        onRow={onRow}
        bordered={props.bordered ? props.bordered : false}
        expandable={props?.expandable ? props.expandable : null}
        rowHoverable={false}
        rowClassName={(record, index) => {
          if (props?.tableRowGray && typeof props.tableRowGray === 'function') {
            return props?.tableRowGray(record) ? props?.tableRowGray(record) : index % 2 === 0 ? '' : 'zebra-row-odd'
          }
          return index % 2 === 0 ? '' : 'zebra-row-odd'
        }}
      />
      {pagination && (
        <Pagination
          total={pagination.total}
          current={pagination.current}
          pageSize={pagination.pageSize || 10}
          onChange={(page, pageSize) => pagination.onChange!(page, pageSize)}
          showSizeChanger={true}
          showTitle={true}
          showTotal={(total) => `共 ${total} 条`}
          style={{ textAlign: 'center', marginTop: 12 }}
          pageSizeOptions={props?.pageSizeOptions ? props.pageSizeOptions : [10, 30, 100]}
        />
      )}
    </div>
  )
}
